<template>
	<view class="addActivity">
		<view class="addForm">
			<uni-forms ref="baseForm" :modelValue="form" label-width="100">
				<uni-forms-item>
					<view class="alignCenter" style="display: flex;justify-content: center;">
						<uni-singleimg :fileUrl="form.cover" v-if="form.cover" @delPic="delPic"></uni-singleimg>
						<view @click="uploadFileClick('poster')"
							style="width:340rpx;height:200rpx;background: #fff;border-radius: 14rpx;border:1px solid #f0f0f1;">
							<view style="text-align: center;margin-top: 5rpx;font-size: 64rpx;font-weight: 700;color: #666666">
								+</view>
							<view style="font-size: 28rpx;color: #333333;text-align: center;margin-top: 25rpx;font-weight: 700;">
								小组封面</view>
							<view style="font-size: 24rpx;color: #666666;text-align: center;margin-top: 14rpx;">
								尺寸要求：500*300</view>
						</view>
					</view>
				</uni-forms-item>
				<view
					style="width: 100%;height: 96rpx;background-color: #fff;border:1px solid #f0f0f1;border-radius: 10rpx;margin-bottom: 25rpx;">
					<uni-forms-item>
						<view style="display: flex;margin-top: 30rpx;"><uni-icons custom-prefix="iconfont" type="icon-shuxie-"
								size="18" color="#797979" style="margin-right: 20rpx;"></uni-icons>
							<input class="font14" maxlength="20" placeholder="响亮的名字!" placeholder-class="font14 color333"
								v-model.trim="form.name">
						</view>
					</uni-forms-item>
				</view>
				<view
					style="width: 100%;background-color: #fff;border:1px solid #f0f0f1;border-radius: 10rpx;margin-bottom: 25rpx;">
					<uni-forms-item>
						<view style="display: flex;margin-top: 30rpx;">
							<uni-icons custom-prefix="iconfont" type="icon-shuxie-" size="18" color="#797979"
								style="margin-right: 20rpx;"></uni-icons>
							<textarea class="font14" maxlength="50" placeholder="活动简介" placeholder-class="font14 color333"
								cols="30" rows="10" v-model.trim="form.introduction"></textarea>
						</view>
					</uni-forms-item>
				</view>
				<!-- <uni-forms-item label="联系方式" required>
					<view class="flex alignCenter">
						<uni-singleimg :fileUrl="form.contactQrCode" v-if="form.contactQrCode" @delPic="delPic"></uni-singleimg>
						<view class="bold uploadCommon colorccc" @click="uploadFileClick('qrcode')">+</view>
					</view>
				</uni-forms-item> -->
				<!-- <uni-forms-item label="联系电话" required>
					<input class="inputBox font14" maxlength="11" type="number" placeholder="联系电话/联系方式二选一"
						placeholder-class="font14 colorccc" v-model.trim="form.contactPhone">
				</uni-forms-item> -->
				<!-- <uni-forms-item class="specialMargin"></uni-forms-item> -->
				<view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					<view style="width: 12rpx;height: 34rpx;border-radius: 12rpx;background: #F7DD5E;margin-right: 10rpx;">
					</view>
					<text style="font-weight: 700;">收费</text>
				</view>
				<view class="charge specialMargin">
					<radio-group @change="changeCharge">
						<template v-for="(item, index) in chargeArr">
							<label class="uni-list-cell uni-list-cell-pd flex alignCenter font12" v-if="index<1" :key="index">
								<view class="">
									<radio :value="item.value" color="#F7DD5E" :checked="item.value === form.charge"
										style="transform:scale(0.7)" />
								</view>
								<view class="font14">{{item.title}}</view>
							</label>
						</template>
						<template v-for="(item, index) in chargeArr">
							<label class="uni-list-cell uni-list-cell-pd flex alignCenter font12" v-if="index>=1" :key="index">
								<view class="">
									<radio :value="item.value" color="#F7DD5E" :checked="item.value === form.charge"
										style="transform:scale(0.7)" />
								</view>
								<view class="font14">{{item.title}}</view>
								<view class="flex alignCenter" v-if="index==1">
									<input class="font14 bold priceInput" type="number" v-model.trim="form.amount">
									<text class="font14">元</text>
								</view>
								<!-- <label class="flex alignCenter">
									<checkbox-group @change="changeCheckBox">
										<checkbox color="#F7DD5E" class="font14" value="1" :checked="isTeam" style="transform:scale(0.7)" @change="changeCheckBox"/>
									</checkbox-group>
									<text class="font14">拼团</text>
								</label> -->
								<view class="flex alignCenter" v-if="index==2">
									<input class="font14 bold priceInput" type="number" maxlength="5" v-model="form.chargeCount" @focus="changeCheckBox('focus')">
									<text class="font14">人</text>
								</view>
								<view class="flex alignCenter" v-if="index==2">
									<input class="font14 bold priceInput" type="number" maxlength="3" v-model="form.chargeDiscount" @focus="changeCheckBox('focus')">
									<text class="font14">折</text>
								</view>
							</label>
						</template>
					</radio-group>
				</view>
				<!-- <view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					<view style="width: 12rpx;height: 34rpx;border-radius: 12rpx;background: #F7DD5E;margin-right: 10rpx;">
					</view>
					<text style="font-weight: 700;">是否对赌</text>
				</view>
				<view class="charge specialMargin">
					11
				</view> -->
				<view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					<view style="width: 12rpx;height: 34rpx;border-radius: 12rpx;background: #F7DD5E;margin-right: 10rpx;">
					</view>
					<text style="font-weight: 700;">活动打卡模式</text>
				</view>
				<view class="punchMode">
					<radio-group @change="changeMode">
						<label class="uni-list-cell uni-list-cell-pd flex alignCenter" v-for="(item, index) in clockArr"
							:key="index">
							<view>
								<radio :value="item.value" color="#F7DD5E" :checked="item.value == form.taskType"
									style="transform:scale(0.7)" />
							</view>
							<view class="font14">{{item.title}}</view>
						</label>
					</radio-group>
					<view class="flex alignCenter time" v-if="form.taskType==1">
						<view class="font14">选择时间</view>
						<UniDatetimePicker v-model="datetimerange" :clear-icon="false" :start="canShooseTime" type="datetime"
							@change="changeTime" />
					</view>
				</view>
				<view class="singleBox">
					<uni-mdlist :listData="itemArr" @clickItem="clickItem"></uni-mdlist>
				</view>
			</uni-forms>
		</view>
		<view class="publishStyle" @click="toActivityHomePage"><i class="iconfont icon-fabu"></i>确定</view>
		<!-- 选择分区 -->
		<uni-singlepicker :pickerData="subCategory" v-if="showPicker" :showPicker="showPicker" @cancel="cancelPicker"
			@surePicker="surePicker"></uni-singlepicker>
	</view>
</template>

<script>
	import {UniDatetimePicker} from "./uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	import {
		getSubjectCategory
	} from "@/api/index.js"
	import {
		addActivity
	} from "@/api/send.js"
	import {
		chooseImg,
		uploadFile,
		previewImg,
		getNowDate
	} from "@/utils/common.js"
	import {
		money
	} from "@/utils/verification.js"
	export default {
		data() {
			return {
				datetimerange: '',
				form: {
					cover: '',
					name: '',
					introduction: '',
					charge: '0',
					taskType: '0',
					amount: '',
					chargeCount: '',
					chargeDiscount: '',
					// type活动类型，新增的不存在采购活动（1）
					type: 0,
					isBet: false,
					taskStartTime: '',
					taskEndTime: '',
					subjectCode: '',
					subjectName: '',
					teamIds: [],
					contactQrCode: '',
					contactPhone: '',
				},
				// 单选数据源
				chargeArr: [{
					title: '免费',
					value: '0'
				}, {
					title: '收费',
					value: '1'
				},{
					title: '拼团',
					value: '2'
				}],
				clockArr: [{
					title: '当天事当天毕',
					value: '0'
				}, {
					title: '在规定日期前打卡',
					value: '1'
				}, {
					title: '上一个任务完成才能进行下一个任务',
					value: '2'
				}, {
					title: '不限',
					value: '3'
				}],
				isTeam: false,
				showPicker: false,
				subCategory: [],
				//clickItem选择的哪一项（下标）
				clickItemIdx: '',
				//picker选中的数据
				chooseSubject: '',
				itemArr: [{
					title: '选择分区',
					icon: '/static/image/setting/cat.png',
					subTitle: '',
					val: ''
				}, {
					title: '关联小组',
					icon: '/static/image/setting/major.png',
					subTitle: '',
					val: ''
				}],
				aboutGroup: [],
				// 当前时间
				canShooseTime: '',
				// 上传的是哪个图片
				uploadType: '',

			};
		},
		onLoad() {
			uni.removeStorageSync('actConnectGroup')
			uni.removeStorageSync('cropUrl')
			this.getCategory()
			this.canShooseTime = getNowDate('all')
			console.log('===', this.canShooseTime)
		},
		onShow() {
			this.aboutGroup = uni.getStorageSync('actConnectGroup')
			this.itemArr[1].val = this.aboutGroup.length + '个'
			if (uni.getStorageSync('cropUrl')) {
				let path = [uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				console.log('path: ',path);
				uploadFile(path).then((successFile) => {
					if (this.uploadType == 'poster') {
						this.form.cover = successFile.url
					} else {
						this.form.contactQrCode = successFile.url
					}
				}).catch((err) => {
					console.log('err', err)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('actConnectGroup')
			uni.removeStorageSync('cropUrl')
		},
		methods: {
			uploadFileClick(type) {
				this.uploadType = type
				chooseImg(1).then((file) => {
					uni.navigateTo({
						url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + file[0] + '&ratio=4/3'
					})
				})
			},
			// 获取分区
			getCategory() {
				let param = {
					"pageNum": 1,
					"pageSize": 100,
					"type": 0,
					"year": new Date().getFullYear()
				}
				getSubjectCategory(param).then((res) => {
					if (res.code == 100000) {
						res.data.rows.forEach((item) => {
							item.pickerTitle = `(${item.subjectCode})${item.title}`
						})
						this.subCategory = res.data.rows
						// console.log('分区',this.subCategory)
					}
				})
			},
			// 选择分区
			clickItem(val, idx) {
				this.clickItemIdx = idx
				if (idx == 0) {
					this.showPicker = true
					return
				} else if (idx == 1) {
					uni.navigateTo({
						url: '/pages/send/activity/aboutGroup/aboutGroup'
					})
				}
			},
			//取消分区选择
			cancelPicker() {
				this.showPicker = false
			},
			// 选择分区的确定事件
			surePicker(item) {
				console.log('item', item)
				this.chooseSubject = item ? item : this.subCategory[0]
				this.itemArr[this.clickItemIdx].val = (item ? item.pickerTitle :
					`(${this.chooseSubject.subjectCode})${this.chooseSubject.title}`)
				this.showPicker = false
			},
			// 更改收费模式
			changeCharge(e) {
				console.log('val==', e)
				this.form.charge = e.detail.value
				if (this.form.charge < 1) {
					this.isTeam = false
					this.form.amount = ''
					this.form.chargeCount = ''
					this.form.chargeDiscount = ''
					return
				}
			},
			// 更改打卡模式
			changeMode(e) {
				this.form.taskType = e.detail.value
				if (this.form.taskType == 1) {
					this.datetimerange = getNowDate('all')
				} else {
					this.datetimerange = ''
				}
			},
			changeCheckBox(e) {
				console.log('e', e)
				if (e == 'focus') {
					this.isTeam = true
				} else {
					this.form.charge = e.detail.value.length > 0 ? e.detail.value[0] : '0'
					this.isTeam = e.detail.value.length > 0 ? true : false
				}

			},
			// 选择时间
			changeTime(e) {
				console.log('时间', e, this.datetimerange)
			},
			// 删除图片
			delPic() {
				this.form.cover = ''
			},
			toActivityHomePage() {
				console.log('点击', this.form)
				// 选择的分区
				if (this.chooseSubject) {
					this.form.subjectCode = this.chooseSubject.subjectCode
					this.form.subjectName = this.chooseSubject.title
				}
				// 打卡模式的时间
				if (this.datetimerange) {
					this.form.taskEndTime = this.datetimerange
				}
				// 关联的小组
				let groupIds = []
				if (this.aboutGroup.length > 0) {
					this.aboutGroup.forEach((item) => {
						groupIds.push(item.id)
					})
					this.form.teamIds = groupIds
				}
				let canNext = true
				for (let idx in this.form) {
					if ((this.form[idx] == null || this.form[idx] === "") && idx != 'amount' && idx != 'chargeCount' && idx !=
						'chargeDiscount' && idx != 'taskStartTime' && idx != 'taskEndTime' && idx != 'contactQrCode' && idx !=
						'contactPhone') {
						console.log('idx===', idx)
						uni.showToast({
							title: `${idx=='cover'?'封面':(idx=='name'?'名字':(idx=='introduction'?'简介':((idx=='subjectCode' || idx=='subjectName')?'分区':'必填选项')))}不能为空`,
							icon: 'none'
						})
						canNext = false
						return
					}
				}
				// if (!this.form.contactQrCode && !this.form.contactPhone) {
				// 	uni.showToast({
				// 		title: '联系方式和联系电话必须二选一',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else 
				if (this.form.charge == 2 && !money.test(this.form.amount)) {
					uni.showToast({
						title: '请输入费用',
						icon: 'none'
					})
					return
				} else if (this.form.charge == 2 && this.isTeam && !this.form.chargeCount) {
					uni.showToast({
						title: '请输入拼团人数',
						icon: 'none'
					})
					return
				} else if (this.form.charge == 2 && this.isTeam && !this.form.chargeDiscount) {
					uni.showToast({
						title: '请输入折扣',
						icon: 'none'
					})
					return
				} else if (this.form.taskType == 1 && !this.datetimerange) {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none'
					})
					return
				} else if (this.form.teamIds.length == 0) {
					uni.showToast({
						title: '请选择关联的小组',
						icon: 'none'
					})
					return
				}
				if (!canNext) return
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				addActivity(this.form).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						uni.redirectTo({
							url: '/pages/send/activity/activityDetail/activityDetail?id=' + res.data
						})
					}
				}).catch((err) => {
					uni.hideLoading()
				})

			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F6F8F6;
	}
</style>
<style lang="scss" scoped>
	::v-deep .uni-forms-item__label {
		align-items: flex-start;
		height: auto;
		margin-right: 20rpx;
	}

	.specialMargin {
		margin: 0 0 30rpx;
	}

	.addActivity {
		padding: 30rpx 30rpx 150rpx;
		box-sizing: border-box;
	}

	.addForm {
		// background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		// box-shadow: 0 0 18rpx 0 rgba(0, 0, 0, .3);

	}

	.inputBox {
		border: 1px solid $bordercolor;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.charge,
	.punchMode {
		.priceInput {
			border: 1px solid $bordercolor;
			width: 70rpx;
			padding: 0 10rpx;
			height: 50rpx;
			line-height: 50rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin: 0 10rpx 0 15rpx;
			text-align: center;
		}

		.uni-list-cell {
			margin: 0 0 20rpx;
		}

		.uni-list-cell:last-child {
			margin: 0;
		}
	}

	.punchMode {
		margin: 0 0 30rpx 0;

		.time {
			padding: 0 0 0 10rpx;
			box-sizing: border-box;

			&>.font14 {
				margin: 0 20rpx 0 0;
			}

		}
	}

	.singleBox {
		::v-deep .listItem {
			padding: 30rpx 0;
		}
	}

	.textareaBox {
		border: 1px solid $bordercolor;
		padding: 15rpx 20rpx;
		width: 100%;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.publishStyle {
		position: fixed;
		z-index: 10;
		bottom: 30rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>